<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button  class="he">输入法</button>
        <div class="zi" style="display: none;">
            <div class="pq">
                <p>简写</p>
                <p>拼写</p>
                <p class="guan">关闭</p>
            </div>

        </div>
    </div>
</body>

</html>
<style>
    /* .he {
        width: 90px;
        height: 90px;
        margin: 0 auto;
        background-color: white;
    } */
</style>
<script>
    var gai = document.querySelector(".he")
    var qu = document.querySelector(".zi")
    var gan = document.querySelector(".guan")
    var pq = document.querySelector(".pq").querySelectorAll("p")
    console.log(gan);
    console.log(pq);
   
    gai.onclick = function () {
        qu.style.display = "block"
        console.log(gan,'1111')
    }
    gan.onclick = function () {
        qu.style.display = "none"
    }
    for (let i = 0; i < pq.length; i++) {
        pq[i].onmouseover = function () {
            this.style.backgroundColor = "red"
        }
        pq[i].onmouseout = function () {
            this.style.backgroundColor = "white"
        }
    }
</script>